import React from 'react'
import {Input,Button,List} from "antd";
// import store from "../store/store";
import {connect} from "react-redux"

class TodoListReactRedux extends React.Component{

    handleChange(e){
        this.props.dispatchChangeValue(e.currentTarget.value)
    }
    handleadd(){
        const list1 = this.props.list.concat()
        list1.push(this.props.value)
        this.props.dispatchChangeList(list1)
    }
    del(item){
        console.log(item)
        const list2 = this.props.list.filter(item1=>item1!==item)
        this.props.dispatchChangeList(list2)

    }
    render() {

        console.log(this.props)
        const {value,list} = this.props
        return (
            <div className="search-list">
                <div>
                    <Input placeholder="Basic usage" value={value} onChange={this.handleChange.bind(this)}/>
                    <Button type="primary" onClick={this.handleadd.bind(this)}>发送</Button>
                </div>
                <div>
                    <List
                        size="small"
                        header={<div>.......代办事项........</div>}
                        footer={<div>Footer</div>}
                        bordered
                        dataSource={list}
                        renderItem={item => <List.Item onClick={this.del.bind(this,item)}>{item}</List.Item>}
                    />
                </div>
            </div>
        )
    }
};
export default connect(state=>({...state}),dispatch=>({
    dispatchChangeValue(value) {
        dispatch({
            type: "changeValue",
            value
        })
    },
    dispatchChangeList(list){
        dispatch({
            type: "changeList",
            list
        })
    }

}))(TodoListReactRedux)